<script setup lang="ts">
defineOptions({
  name: "fabBoardModelBoxCommon"
});

import { ref, onMounted, inject, provide, watch, useSlots, nextTick } from "vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import { getFabBoardPieData, getFabBoardBarData, getFabBoardEffluentData, getFabBoardSelectOptions } from "@/api/modules/fab";

const areaOptions = inject("areaOptions", ref<Array<any>>([]));

interface Props {
  title: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: ""
});

const classCodeOptions = [
  {
    code: "machine",
    name: "机械科"
  },
  {
    code: "electrictity",
    name: "电科"
  },
  {
    code: "water",
    name: "水科"
  },
  {
    code: "gas",
    name: "气化科"
  }
];

const classCode = defineModel("classCode", { type: String, default: "" });
const area = defineModel("area", { type: String, default: "" });
const loading = defineModel("loading", { type: Boolean, default: false });

const specialGasType = ref<string>("");
const specialGasTypeName = ref<string>("");
const specialGasTypeOptions = ref<Array<any>>([]);

provide("area", area);
provide("specialGasType", specialGasType);
provide("specialGasTypeName", specialGasTypeName);
provide("specialGasTypeOptions", specialGasTypeOptions);

const emits = defineEmits(["classCodeChange", "areaChange"]);

const classCodeChangeHandler = async (val: string, flag: boolean = false) => {
  area.value = "ALL";
  if (val === "gas") {
    await querySpecialGasSelectOptionsFn();
  }
  emits("classCodeChange", val, flag);
};

const areaChangeHandler = async (val: string, flag: boolean = false) => {
  emits("areaChange", val, flag);
};

const querySpecialGasSelectOptionsFn = async (cb?: () => void) => {
  if (!!specialGasTypeOptions.value?.length) {
    cb && cb();
    return;
  }
  // gasName      SPECIALTY    CHEMICALS   ATMOSPHERIC
  const params = { className: "GAS", gasName: "SPECIALTY" };
  const res = await getFabBoardSelectOptions(params);
  specialGasTypeOptions.value = res.map((item: any) => ({ ...item, value: item.systemId, label: item.systemName }));
  specialGasType.value = specialGasTypeOptions.value[0].value;
  specialGasTypeName.value = specialGasTypeOptions.value[0].label;
  cb && cb();
};

const specialGasTypeChangeHandler = async (val: string, flag: boolean = false) => {
  const t = specialGasTypeOptions.value.find(item => item.value === val);
  specialGasTypeName.value = t.label;
};

const water = watch(
  () => areaOptions.value,
  async val => {
    if (val?.length) {
      area.value = val[0]?.value;
      await areaChangeHandler(val[0]?.value, true);
      water();
    }
  }
);

const init = async () => {
  if (classCode.value === "gas") {
    await querySpecialGasSelectOptionsFn();
    emits("classCodeChange", classCode.value, true);
  }
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <div class="fab-board-model-box-common">
    <div class="fab-board-model-box-common-title">
      <div class="title-left">
        <transition name="fab-board-model-ttile-left" mode="out-in">
          <div v-if="classCode === 'gas'" class="gas-title-left">
            <span class="gas-title-left-label">特气系统：</span>
            <px-select v-model="specialGasType" style="width: 120px" size="small" placeholder="请选择特气类型" @change="specialGasTypeChangeHandler">
              <px-option v-for="item in specialGasTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </px-select>
          </div>
        </transition>
      </div>
      <div class="title-middle">
        <px-radio-group v-model="classCode" size="small" @change="classCodeChangeHandler">
          <px-radio-button v-for="item in classCodeOptions" :key="item.code" :label="item.code" :name="item.name">{{ item.name }}</px-radio-button>
        </px-radio-group>
      </div>
      <div class="title-right">
        <slot name="extraTitle" />
        <px-select v-model="area" style="width: 120px" size="small" placeholder="请选择区域" @change="areaChangeHandler">
          <px-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </div>
    </div>
    <div v-loading="loading" class="fab-board-model-box-common-content">
      <slot />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fab-board-model-box-common {
  width: 100%;

  .fab-board-model-box-common-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .title-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 240px;

      .gas-title-left {
        display: flex;
        gap: 8px;
        align-items: center;

        .gas-title-left-label {
          font-size: 14px;
          color: #333;
        }
      }

      .fab-board-model-ttile-left-enter-active,
      .fab-board-model-ttile-left-leave-active {
        transition: all 0.4s ease;
      }

      .fab-board-model-ttile-left-enter-from {
        opacity: 0;
        transform: translateX(-120px);
      }

      .fab-board-model-ttile-left-leave-to {
        opacity: 0;
        transform: translateX(-120px);
      }
    }

    .title-middle {
      display: flex;
      align-items: center;
    }

    .title-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 240px;
    }
  }

  .fab-board-model-box-common-content {
    width: 100%;
    height: 100%;
  }
}
</style>
